<template>
	<view class="gedan-container">
		<view class="playlist-title">
			<!-- <image :src="playListData.coverImgUrl" mode=""></image> -->
			<div class="xiex-image">
				<xiex-image :src="playListData.coverImgUrl" mode=""></xiex-image>
			</div>
			<p class = "description">{{playListData.description}}</p>
		</view>
		
		<view class="playlist-content">
			<view v-for="(item,index) in playListData.tracks" :key="item.id" @click="play(item)" class="playlist-content-item">				
				<i class="icon-add iconfont number" @click.stop="addPlayList(item)"></i>
				<view class="content-left">
					<!-- <image :src="item.al.picUrl+'?params=50y50'" mode="scaleToFill" @load="handleLoad(item)" v-show="item.t"></image>
					<image src="../../static/logo.png" mode="scaleToFill"v-show="!item.t"></image> -->
					<div class="xiex-image">
						<xiex-image :src="item.al.picUrl+'?params=50y50'" :bgUrl="'static/bg.jpg'"></xiex-image>
					</div>
					<view>
						<h4 class="title">{{item.name}}</h4>
						<p class="author">{{item.ar[0].name}} - {{item.name}}</p>
					</view>
					<i class="iconfont icon-icon-"></i>
				</view>
				
			</view>
		</view>
		<!-- 底部点击弹出音乐界面 -->
		<view class="music-play" @click="showPlayView()">
			<tab-bar :iac="iac"></tab-bar>
		</view>
		<!-- 音乐界面弹出 -->
	<wyb-popup ref="playView" type="bottom"  width="500" height="100%" radius="0" :showPlay="true" class="playView" style="position ralative; z-index :999">
			  <play-view @hidePlayView="hidePlayView" :iac="iac"></play-view>
		</wyb-popup>
	</view>
</template>

<script>
	import app from '../../App.vue'
	export default {
		data() {
			return {
				playListData: [],
				iac: null
			};
		},
		computed: {
			nowSong(){
				return this.$store.state.song
			},
			nextPlay(){
				return this.$store.getters.nextPlayData
			}
		},
		onLoad(options) {
			// console.log(this.$scope)
			this.iac = app.globalData.iac
			this.getPlayList(options.resourceId)
		},
		methods: {
			getPlayList(id){  
				uni.request({
					url: 'http://localhost:3000/playlist/detail?id='+id,
					success: (res) => {
						this.playListData = res.data.playlist
						console.log(this.playListData)
					}
				})
			},
			play(item){
				// console.log(item)
				uni.request({
							url: "http://localhost:3000/song/url?id=" + item.id,
							success: (res) => {
								console.log(res.data)
								if(!res.data.data[0].url)return uni.showToast({
									title: '暂时比较穷',
									icon: 'none'
								})
								this.nowSong.id = item.id
								this.nowSong.url = res.data.data[0].url
								this.nowSong.image = item.al.picUrl
								this.nowSong.playState = true
								this.nowSong.author = item.ar[0].name
								this.nowSong.title = item.name
								this.$store.commit('songChange', this.nowSong)
								this.iac.src = this.nowSong.url
								// iac.play()
								this.controll()
							}
				})
				
			},
			// 播放/暂停
			controll(){
				// console.log(this.iac)
				if(this.nowSong.playState)return this.iac.play()
				this.iac.pause()
			},
			showPlayView(){
				this.$refs.playView.show()
			},
			hidePlayView(){
				this.$refs.playView.hide()
			},
			addPlayList(item){
				// console.log(data)
				let nextSong = {}
				nextSong.id = item.id
				nextSong.image = item.al.picUrl
				nextSong.author = item.ar[0].name
				nextSong.title = item.name
				nextSong.url = ''
				nextSong.lyric = ''
				this.$store.commit('nextPlayListChange',nextSong)
				console.log(this.$store.getters.nextPlayData)
			},
			handleLoad(item){
				item.t = 1

			}
		}
	}
</script>

<style lang="less">
	.gedan-container {
		padding-bottom: 70rpx;
		// background-color: rgba(9,99,9,.5);
	}
	.playlist-title {
		display: flex;
		// justify-content: space-between;
		padding: 40rpx 30rpx;
		.xiex-image {
		width: 200rpx;
		 height: 200rpx;
		 margin-right: 20rpx;
		 }
		.description {
			font-size: 24rpx;
			width: 470rpx;
			height: 202rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 6;
			-webkit-box-orient: vertical;
			
		}
	}
	.playlist-content {
		padding: 0 30rpx;
		
	}
	.playlist-content-item {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0;
		border-bottom: 1px solid #ccc;
		.number {
			line-height: 92rpx;
			width: 50rpx;
			// padding-right: 20rpx;
			box-sizing: border-box;
		}
		.content-left {
			position: relative;
			display: flex;
			justify-content: space-between;
			// image {width: 100rpx; height: 100rpx; border: .5rpx solid #eee; border-radius: 50%;}
			.xiex-image {overflow: hidden; width: 100rpx; height: 100rpx; border: .5rpx solid #eee; border-radius: 50%;}
			view {
				margin: 8rpx 0 0 20rpx; 
				width: 480rpx;
				.title {font-size: 24rpx;}
				.author {font-size: 16rpx; margin-top: 16rpx;}
			}
			i {
				position: absolute;
				top: 35rpx;
				right: 40rpx;
			}
			
		}
	}
	.playlist-content-item:hover {
		i {
			animation: fail 3s linear;
		}
	}
	.music-play {
		position: fixed;
		bottom: 0;
		width: 100%;
	}	
	@keyframes fail {
		0% {
			
		}
		10% {
			top: -30rpx;
			right: 50rpx;
		}
		100% {
			top: 2000rpx;
			right: 200rpx;
		}
	}
</style>
